JavaScript - DOM基础

发表于   |   分类于   |  

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。我们可以将 DOM 视为连接 HTML 和 JavaScript 的接口。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML，比如：

  • 改变页面中的所有 HTML 元素
  • 改变页面中的所有 HTML 属性
  • 改变页面中的所有 CSS 样式
  • 对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript 找到元素。有三种方法来做这件事：

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

通过 id 查找 HTML 元素

语法：document.getElementById('id')

功能：返回对拥有指定 id 的第一个对象的引用

返回值：DOM 对象

说明：id 为 DOM 元素上 id 属性的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <div class="box" id="box">
    box
  </div>
  <script type="text/javascript">
    var box = document.getElementById("box");
    console.log(box);
    /*log:
    <div class="box" id="box">
     box
    </div>
    */
    var boxs = document.getElementById("boxs");
    console.log(boxs);
    /*log:
    null
    */
  </script>
</body>

通过标签名查找 HTML 元素

1
2
3
//查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名查找 HTML 元素在只适用于 IE9 以上。

修改元素样式

语法：ele.style.styleName = styleValue

功能：设置 ele 元素的 CSS 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p class="text" style="color:red">hello world!</p>
    <script type="text/javascript">
      var text = document.getElementsByClassName('text');
      for (var i = 0; i < text.length; i++) {
        text[i].style.color = '#000';
      }
    </script>
  </body>
</html>

获取和修改标签内内容

语法：ele.innerHTML

功能：返回元素开始标签和结束标签之间的 HTML

语法：ele.innerHTML = "hello"

功能：设置元素开始标签和结束标签之间的 HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
  <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script type="text/javascript">
    var list = document.getElementById('list').getElementsByTagName('li');
    for (var i = 0; i < list.length; i++) {
      var num = list[i].innerHTML
      console.log(num);
      list[i].innerHTML = '<i>' + (parseInt(num) + 10) + '<i>';
    }
  </script>
</body>

获取和修改元素的 class 属性

语法：ele.className

功能：返回元素的 class 属性

语法：ele.className = "hello"

功能：设置返回元素的 class 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .box {
      background-color: red;
      width: 200px;
      height: 200px;
    }
    .bag {
      border-color: blue;
      border-width: 1em;
      border-style: solid;
    }
  </style>
</head>
<body>
  <div class="box" id="box">
  </div>
  <script type="text/javascript">
    var box = document.getElementById('box');
    var boxClass = box.className;
    box.className = boxClass + ' ' + 'bag';
  </script>
</body>
</html>

获取和修改元素属性

元素的属性有标准属性和自定义属性两种，标准属性是指 HTML 元素自身具有的属性，自定义属性既是我们自己给元素添加的属性。

获取和修改标准属性

1
2
3
4
5
6
7
8
9
<body>
  <p align="center">hello world!</p>
  <script type="text/javascript">
    var arr = document.getElementsByTagName('p');
    for (var i = 0; i < arr.length; i++) {
      arr[i].align = 'left';
    }
  </script>
</body>

获取和修改自定义属性

语法：ele.getAttribute("key")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <p data-type="upper">hello world!</p>
  <p data-type="lower">HELLO WORLD!</p>
  <script type="text/javascript">
    var arr = document.getElementsByTagName('p');
    for (var i = 0; i < arr.length; i++) {
      if (arr[i].getAttribute('data-type') == 'upper') {
        arr[i].innerHTML = arr[i].innerHTML.toUpperCase();
      }
      else if (arr[i].getAttribute('data-type') == 'lower') {
        arr[i].innerHTML = arr[i].innerHTML.toLowerCase();
      }
    }
  </script>
</body>

添加自定义属性

语法：ele.setAttribute("key", value)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <form class="" action="index.html" method="post">
    <input id="user" type="text" name="user" value="a">
  </form>
  <script type="text/javascript">
    var user = document.getElementById("user");
    user.setAttribute("minLen",3);
    var minLen = user.getAttribute("minLen");
    var userValue = user.value;
    if (minLen > userValue.length) {
      console.log("用户名：" + userValue + "太短了");
      //log: 用户名：a太短了
    }
  </script>
</body>

删除属性

语法：ele.removeAttribute("key")

1
2
3
4
5
6
7
<body>
  <p align="center">hello world!</p>
  <script type="text/javascript">
    var ele = document.getElementsByTagName("p");
    ele[0].removeAttribute("align");
  </script>
</body>